<template>
	<view class='zong'>
		<view class='dizhi_kuang' :style="'height:'+headHeight+'rpx;'">
			<view class="xiang" @click="get">
				<image src="/static/images/shouye/dizhi.svg" class='dizhi' type='widthFix' />
				<text class='xiala_zi'>{{address}}</text>
				<image src="/static/images/shouye/xia_hei.svg" class='jiantou' mode="widthFix"></image>
			</view>
		</view>
		<view class='sousuo_kuang' :style="'margin-top: '+headHeight+'rpx;'">
			<view class='sousuo_zikuang'>
				<image src="/static/images/shouye/sousuo.svg" class='sousuo' type='widthFix' />
				<input type="text" placeholder="搜搜美食/店面名称" class='sousuo_zi' @confirm="sousuochuli"
					v-model="sousuozhi" />
			</view>
		</view>
		<view class='banner_kuang'>
			<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for='(item, index) in con.banner' :key='index'>
					<image :src="item.media" class='tu' mode='scaleToFill'></image>
				</swiper-item>
			</swiper>
		</view>
		<view class='anniu_kuang'>
			<view v-for="(item,index) in ['祖传美食', '经典厨艺', '地方特色']" :key="index" class='xiang'>
				<image src="/static/images/shouye/zikuang.png" type='widthFix' class='tu'></image>
				<text class="zi">{{item}}</text>
			</view>
		</view>
		<view class='dazhongquyu_kuang' v-if='con.index_type1'>
			<image :src="baseurl+'/applet/common/dazhong.png'" class='toubiao' type='widthFix' />
			<view class='kuang_zilei'>
				<view class='xiang' v-for="(item, index) in con.index_type1" :key='index'
					@tap='tiaoshangjialiebiao(item.id)'>
					<image :src="item.image" class='tu' type='widthFix' />
					<text class='zi'>{{item.name}}</text>
				</view>
				<view style='clear:both;'></view>
			</view>
		</view>
		<view class='laorenyuyingyouerqu_kuang' v-if='con.index_type2'>
			<image :src="baseurl+'/applet/common/old.png'" class='toubiao' type='widthFix' />
			<view class='kuang_zilei'>
				<view class='xiang' v-for="(item, index) in con.index_type2" :key='index'
					@tap='tiaoshangjialiebiao(item.id)'>
					<image :src="item.image" class='tu' type='widthFix' />
					<text class='zi'>{{item.name}}</text>
				</view>
				<view style='clear:both;'></view>
			</view>
		</view>
		<view class='binghuanzheyusushiqu_kuang' v-if='con.index_type3'>
			<image :src="baseurl+'/applet/common/binghuan.png'" class='toubiao' type='widthFix' />
			<view class='kuang_zilei'>
				<view class='xiang' v-for="(item, index) in con.index_type3" :key='index'
					@tap='tiaoshangjialiebiao(item.id)'>
					<image :src="item.image" class='tu' type='widthFix' />
					<text class='zi'>{{item.name}}</text>
				</view>
				<view style='clear:both;'></view>
			</view>
		</view>
	</view>

</template>

<script>
	let dazhongquyu, laorenyuyingyouerqu, binghuanzheyusushiqu, di, header, that
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['seele'])
		},
		data() {
			return {
				shop_id: 0,
				con: {},
				sousuozhi: '',
				baseurl: getApp().globalData.baseurl,
				address: '定位中...',
				headHeight: 0
			}
		},

		methods: {
			get() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.address = res.address
					}
				});
			},
			sousuochuli() {
				if (that.sousuozhi.trim() == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'error'
					})
				} else {
					let keyword = that.sousuozhi.trim()
					uni.navigateTo({
						url: `/pages/dispatch/shop/shangjialiebiao?keyword=${keyword}`
					})
				}
			},
			tiaoshangjialiebiao(id) {
				// uni.navigateTo({
				// 	url: `/pages/dispatch/shop/shangjialiebiao?category_id=${id}`
				// })
				uni.setStorageSync('id',id)
				uni.switchTab({
					url: '/pages/turntolocal'
				})

			}
		},
		// onTabItemTap(item) {
		//     console.log('Tab item tapped:', item);
		//     // 如果是特定的页面路径，执行自定义逻辑
		//     if (item.pagePath === 'pages/wodeshipin') {
		//       console.log('自定义按钮被点击，不跳转页面');
		//       // 执行自定义操作
		//       // 阻止默认跳转行为
		//       return false;
		//     }
		// },
		onLoad(options) {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
			that = this
			header = {
				token: this.$store.state.user.token
			}
			console.log('pages/index/index', options);
			if (options.hasOwnProperty('scene')) {
				let scene = decodeURIComponent(options.scene);
				scene = this.$wanlshop.getParam(scene);
				console.log('微信小程序：', scene);

				if ('shop_id' in scene) {
					// uni.redirectTo({
					// 	// url:"/pages/dispatch/shop/wifiPage?shop_id="+scene.shop_id
					// 	url:"/pages/index/index?shop_id="+
					// });
					this.shop_id = scene.shop_id;
				}
			}

			// if('shop_id' in options){
			// 	this.shop_id =options.shop_id;
			// }
			// this.$store.dispatch('seele/loadShopHomeInfo',this.shop_id);
			// this.$store.dispatch('seele/freshLocation','商店首页');
			uni.request({
				url: 'https://www.lichu2025.cn/api/chef/index/index',
				header,
				complete(res) {
					if (res.res.code === 1) {
						that.con = res.data
					}
				}
			})
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res)
					uni.setStorageSync('latitude', res.latitude);
					uni.setStorageSync('longitude', res.longitude);
					const url =
						`https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=S7JBZ-THWKU-YXQV4-BRO5H-TYJB6-XAB6Z`;
					uni.request({
						url,
						success: (res) => {
							if (res.data.status === 0) {
								// 提取城市信息
								console.log(res.data)
								this.address = res.data.result.address
							} else {
								console.error("逆地理编码失败", res.data.message);
								uni.showToast({
									title: "获取城市失败",
									icon: "none"
								});
							}
						},
						fail: (err) => {
							console.error("请求失败", err);
							uni.showToast({
								title: "网络错误",
								icon: "none"
							});
						}
					});
				},
				fail(err) {
					console.error('获取位置失败：', err);
				}
			});
		},
	}
</script>

<style lang="scss" scoped>
	.zong {
		position: relative;
		padding-bottom: 50rpx;
		left: 0px;
		top: 0px;
		width: 750rpx;
		opacity: 1;
		background: #EEFCEB;

		text,
		input {
			font-family: HarmonyOS Sans SC;
		}

		.dizhi_kuang{
			position: fixed;
			background: #EEFCEB;
			z-index: 9;
		}

		.dizhi_kuang {
			width: 750rpx;
			// height: 300rpx;
			top: 0;
			position: fixed;
			z-index: 9;

			.xiang {
				width: 750rpx;
				height: 100rpx;
				bottom: 0rpx;
				left: 0;
				display: flex;
				align-items: center;
				position: absolute;

				>text,
				>image,
				>view {
					display: block;
					float: left;
				}

				.dizhi {
					margin-left: 25rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.xiala_zi {
					max-width: 300rpx;
					color: black;
					margin-left: 9rpx;
					font-size: 30rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.jiantou {
					width: 20rpx;
					height: 20rpx;
					margin-left: 14rpx;
					// margin-top: 14rpx;
				}
			}
		}

		.sousuo_kuang {
			width: 690rpx;
			height: 60rpx;

			.sousuo_zikuang {
				background: white;
				width: 690rpx;
				height: 70rpx;
				margin-left: 30rpx;
				border-radius: 16rpx;
				position: relative;
				display: flex;
				align-items: center;

				.sousuo,
				.sousuo_zi {
					position: absolute;
				}

				.sousuo {
					border-radius: 15rpx;
					width: 35rpx;
					height: 35rpx;
					// top: 18rpx;
					left: 23rpx;
				}

				.sousuo_zi {
					height: 28rpx;
					font-size: 24rpx;
					left: 73rpx;
					// top: 15rpx;
					width: 600rpx;
					display: block;
				}
			}
		}

		.banner_kuang {
			border-radius: 16rpx;
			width: 750rpx;
			// height: 320rpx;
			margin-bottom: 33rpx;
			margin-top: 40rpx;

			swiper {
				width: 690rpx;
				height: 298rpx;
				margin-left: 30rpx;

				swiper-item {
					width: 690rpx;
					height: 298rpx;

					.tu {
						width: 690rpx;
						height: 298rpx;
						border-radius: 16rpx;
					}
				}
			}
		}

		.anniu_kuang {
			width: 690rpx;
			height: 54rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;

			.xiang {
				float: left;
				position: relative;
				width: 210rpx;
				height: 54rpx;
				text-align: center;

				.tu {
					width: 210rpx;
					height: 54rpx;
					left: 0;
					position: absolute;
				}

				.zi {
					width: 210rpx;
					height: 54rpx;
					opacity: 1;
					text-align: center;
					position: relative;
					font-size: 34rpx;
					font-family: HelloFont ID JiangHuTi;
					color: #F6FBC1;
					top: 5rpx;
				}
			}
		}

		.dazhongquyu_kuang,
		.laorenyuyingyouerqu_kuang,
		.binghuanzheyusushiqu_kuang {
			margin-top: 33rpx;
			width: 690rpx;
			border-radius: 16rpx;
			position: relative;
			left: 30rpx;
			padding-bottom: 100rpx;

			.kuang_zilei {
				position: relative;
				border-radius: 16rpx;
				padding-bottom: 30rpx;
			}
		}

		.dazhongquyu_kuang {
			background: #E0FA9E;

			.toubiao {
				position: absolute;
				width: 250rpx;
				height: 72rpx;
				margin-left: 220rpx;
			}

			.kuang_zilei {
				width: 673rpx;
				background: white;
				left: 9rpx;
				top: 86rpx;

				.xiang {
					width: 99rpx;
					height: 90rpx;
					float: left;
					margin-left: 30rpx;
					margin-top: 40rpx;
					text-align: center;

					.tu {
						width: 50rpx;
						height: 50rpx;
						display: inline-block;
					}

					.zi {
						display: block;
						font-size: 24rpx;
					}
				}
			}
		}

		.laorenyuyingyouerqu_kuang {
			background: #FEF6D2;

			.toubiao {
				position: absolute;
				width: 350rpx;
				height: 72rpx;
				margin-left: 170rpx;
			}

			.kuang_zilei {
				width: 673rpx;
				background: white;
				left: 9rpx;
				top: 86rpx;

				.xiang {
					width: 99rpx;
					height: 90rpx;
					float: left;
					margin-left: 30rpx;
					margin-top: 40rpx;
					text-align: center;

					.tu {
						width: 50rpx;
						height: 50rpx;
						display: inline-block;
					}

					.zi {
						display: block;
						font-size: 24rpx;
					}
				}
			}
		}

		.binghuanzheyusushiqu_kuang {
			background: #B6F5C7;

			.toubiao {
				position: absolute;
				width: 350rpx;
				height: 72rpx;
				margin-left: 170rpx;
			}

			.kuang_zilei {
				width: 673rpx;
				background: white;
				left: 9rpx;
				top: 86rpx;

				.xiang {
					width: 99rpx;
					height: 90rpx;
					float: left;
					margin-left: 30rpx;
					margin-top: 40rpx;
					text-align: center;

					.tu {
						width: 50rpx;
						height: 50rpx;
						display: inline-block;
					}

					.zi {
						display: block;
						font-size: 24rpx;
					}
				}
			}
		}

		.di {
			width: 750rpx;
			height: 120rpx;
			bottom: 0;
			position: fixed;
			background: white;
		}
	}
</style>